<template>
    <div id="detail">
        <div class="count">
            <div class="count-num">223.00元</div>
            <div class="count-operate">
                <van-button round plain hairline type="info" size="small" @click="cashOut">提现</van-button>
            </div>
        </div>
        <div class="tab-c">
            <div class="selt-tab">
                <van-tabs @click="onClick">
                    <van-tab title="全部"></van-tab>
                    <van-tab title="充值"></van-tab>
                    <van-tab title="消费"></van-tab>
                </van-tabs>
            </div>
            <div class="data-s" @click="show = true">
                <span>| 筛选时间v</span>
            </div>
        </div>
        <div class="list-cont">
            <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
            >
                <div v-for="(item, index) in list" :key="index" class="list-conts" >
                    <div class="van-row--flex">
                        <span v-text="item.use" class="nam"></span>
                        <span class="cor">{{item.money}}元</span>
                    </div>
                    <div class="van-row--flex">
                        <span class="cor" v-text="item.date"></span>
                        <span><van-button round type="info" size="mini" @click="cashOut">提现</van-button></span>
                    </div>
                </div>
            </van-list>
        </div>
        <van-popup
                v-model="show"
                closeable
                position="bottom"
                :style="{ height: '36%' }"
        >
            <van-datetime-picker
                    v-model="currentDate"
                    type="date"
                    :min-date="minDate"
            />
        </van-popup>
    </div>
</template>

<script>
    export default {
        name: 'detail',
        data() {
            return {
                list: [],
                loading: false,
                show: false,
                finished: false,
                minDate: new Date(),
                currentDate: new Date()
            }
        },
        mounted() {
        },
        methods: {
            onClick() {
            },
            onLoad() {
                // 异步更新数据
                setTimeout(() => {
                    for (let i = 0; i < 10; i++) {
                        this.list.push({use: '充值', isall: false, money: '+100', date: '2019-06-01 12:03'});
                    }
                    // 加载状态结束
                    this.loading = false;

                    // 数据全部加载完成
                    if (this.list.length >= 40) {
                        this.finished = true;
                    }
                }, 500);
            },
            cashOut() {
                this.$router.push('/wallet/cashout')
                // this.$router.push('/wallet/cashout')
            }
        }
    }
</script>

<style scoped lang="scss">
    #detail {
        font-size: 0.4rem;
        padding: 16px;
        .cor {
            color: #ddd;
        }
        .count {
            height: 3rem;
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
            background-color: #4f88f1;
            color: #ffffff;
            .count-num {
                font-size: 0.8rem;
                text-align: center;
                padding-top: 0.6rem;
            }
            .count-operate {
                text-align: center;
                .van-button {
                    width: 80px;
                }
            }
        }
        .tab-c {
            background-color: #fff;
            .selt-tab {
                display: inline-block;
                width: 75%;
                vertical-align: top;
            }
            .data-s {
                display: inline-block;
                width: 25%;
                vertical-align: top;
                margin-top: 12px;
                font-size: 14px;
                color: #646566;
            }
            .van-col {
                padding: 14px 10px;
                text-align: center;
            }
        }
        .list-cont {
            margin-top: 16px;
            font-size: 12px;
            background-color: #fff;
            border-radius: 8px;
            padding: 16px;
            .list-conts {
                border-bottom: 1px solid #ddd;
                .van-row--flex {
                    .nam {
                        font-size: 14px;
                    }
                    span {
                        padding: 4px;
                        flex: 1;
                        &:last-child {
                            text-align: right;
                        }
                    }
                }
            }
        }
    }
</style>
